<template>
  <div style="width: 600px; height: 600px" ref="myDiv" id="myDiv"></div>
</template>

<script>
import * as echarts from "../../assets/echarts.min.js";
import axios from "axios";
import { reactive, ref, onMounted } from "vue";

export default {
  name: "HelloWorld",
  setup() {
    // 生命周期函数，项目启动时会自动运行
    onMounted(() => {
      datainit(); // 调用初始化的方法
    });

    // 初始化的方法
    const datainit = () => {
      // // 请求后端接口
      // axios({
      //   method:'get',
      //   url:'/api/data/list'
      // }).then(res=>{
      //   console.log(res.data.data);
      //    // 图表的初始化，放在数据获取成功后
      //    init();
      // })

      var bool = false;
      var zhi = 0;
      var zhi2 = 0;
      var dataAll = [];
      var names = [];
      var start = [];
      var start1 = [];
      var start2 = [];
      var start3 = [];
      var url = "/api/data/list2";

      // 请求后端接口
      axios.get(url).then((res) => {
        var data = res.data.data.data;
        console.log(data);
        for (let i in data) {
          if (data[i].status == "运行") {
            for (let j in dataAll) {
              if (data[i].name == dataAll[j].name) {
                bool = true;
                zhi = j;
                break;
              } else {
                bool = false;
              }
            }
            var time =
              (new Date(data[i].endtime).getTime() -
                new Date(data[i].starttime).getTime()) /
              1000;
            if (bool) {
              bool = false;
              for (let j in dataAll[zhi].status) {
                if (
                  data[i].starttime.split("-")[2].split(" ")[0] ==
                  dataAll[zhi].status[j]
                ) {
                  bool = true;
                  zhi2 = j;
                  break;
                } else {
                  bool = false;
                }
              }
              if (bool) {
                dataAll[zhi].time[zhi2] += time;
                dataAll[zhi].count[zhi2] += 1;
              } else {
                dataAll[zhi].status.push(
                  data[i].starttime.split("-")[2].split(" ")[0]
                );
                dataAll[zhi].time.push(time);
                dataAll[zhi].count.push(1);
              }
            } else {
              dataAll.push({
                name: data[i].name,
                status: [data[i].starttime.split("-")[2].split(" ")[0]],
                time: [time],
                count: [1],
                chejian: data[i].chejian,
              });
            }
          }
        }

        // console.log(dataAll);
        for (let i in data) {
          if (names.indexOf(data[i].name) == -1) {
            names.push(data[i].name);
          }
        }

        let name2 = [];
        for (let i in dataAll) {
          name2.push(dataAll[i].name);
        }

        for (let i in names) {
          if (name2.indexOf(names[i]) == -1) {
            dataAll.push({ name: names[i], status: [], time: [], count: [] });
          }
        }

        name2 = [];
        for (let i in dataAll) {
          name2.push(dataAll[i].name);
        }

        console.log(dataAll);

        //计算所有设备每日运行时间

        //判断是否有该状态
        for (let i in dataAll) {
          if (dataAll[i].status.indexOf("12") != -1) {
            start.push(
              dataAll[i].time[dataAll[i].status.indexOf("12")] /
              dataAll[i].count[dataAll[i].status.indexOf("12")]
            );
          } else {
            start.push(0);
          }
          if (dataAll[i].status.indexOf("13") != -1) {
            start1.push(
              dataAll[i].time[dataAll[i].status.indexOf("13")] /
              dataAll[i].count[dataAll[i].status.indexOf("13")]
            );
          } else {
            start1.push(0);
          }
          if (dataAll[i].status.indexOf("14") != -1) {
            start2.push(
              dataAll[i].time[dataAll[i].status.indexOf("14")] /
              dataAll[i].count[dataAll[i].status.indexOf("14")]
            );
          } else {
            start2.push(0);
          }
          if (dataAll[i].status.indexOf("15") != -1) {
            start3.push(
              dataAll[i].time[dataAll[i].status.indexOf("15")] /
              dataAll[i].count[dataAll[i].status.indexOf("15")]
            );
          } else {
            start3.push(0);
          }
        }

        console.log(name2, start, start1, start2, start3);

        // 图表的初始化，放在数据获取成功后
        init(name2, start, start1, start2, start3);
      });
    };

    // 初始化图表
    const init = (name2, start, start1, start2, start3) => {
      //柱状图每日
      var options = {
        legend: {
          top: "bottom",
        },
        title: {
          text: "柱状图展示每日所有车间各设备平均运行时长（秒）",
        },
        xAxis: {
          data: name2,
          name: "各设备",
        },
        yAxis: {
          name: "运行平均时长(秒)",
        },
        series: [
          {
            name: "12日",
            data: start,
            type: "bar",
          },
          {
            name: "13日",
            data: start1,
            type: "bar",
          },
          {
            name: "14日",
            data: start2,
            type: "bar",
          },
          {
            name: "15日",
            data: start3,
            type: "bar",
          },
        ],
      };

      let myChart = echarts.init(document.getElementById("myDiv"));
      // var myChart = echarts.init(myDiv.value)
      myChart.setOption(options);
    };
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>
